<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card shadow="hover">
    
        <el-row>
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
        </el-row>

        <el-table
            :data="orderList"
            stripe
            border
            class="order_table"
            style="width: 100%">
            <el-table-column
            type="index"
            label="#"
            width="90">
            </el-table-column>
            <el-table-column
            prop="order_number"
            label="订单编号"
            width="300">
            </el-table-column>
            <el-table-column
            prop="order_price"
            label="订单价格"
            width="100">
            </el-table-column>
            <el-table-column
            prop="order_pay"
            label="是否付款"
            width="120">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.order_pay === '1'" type="success">已付款</el-tag>
                    <el-tag v-else type="danger">未付款</el-tag>
                </template>
            </el-table-column>
            <el-table-column
            prop="pay_status"
            label="是否发货"
            width="120">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.pay_status === '1'" type="success">已发货</el-tag>
                    <el-tag v-else type="danger">未发货</el-tag>
                </template>
            </el-table-column>
            <el-table-column
            prop="create_time_cn"
            label="下单时间" width="220">
            </el-table-column>
             <el-table-column
            label="操作">

            <template slot-scope="scope">

            <el-button
              type="primary"
              size="mini"
              round
              icon="el-icon-edit"
              @click="showEditDialog(scope.row)"
              >修改地址</el-button
            >

            <el-button
              type="success"
              size="mini"
              round
              icon="el-icon-location"
              @click="showLocationDialog(scope.row)"
              >物流信息</el-button
            >
            </template>
            </el-table-column>
        </el-table>
    
        <!-- 分页区域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="el_pagination_class">
        </el-pagination>
    </el-card>

    <!-- 修改地址提示框 -->
    <el-dialog
    title="修改地址"
    :visible.sync="editAddressDialogVisible"
    width="50%"
    @close="handleEditClose">
    <!-- 表单区域 -->
    <el-form 
    label-width="100px" 
    :model="addressForm"
    :rules="addressFormRules"
    ref="addressFormRef">

        <el-form-item label="省市区/县" prop="address1">
            <el-cascader class="el_cascader_class"
            :options="cityOptions"
            v-model="addressForm.address1"></el-cascader>
        </el-form-item>

        <el-form-item label="详细地址" prop="address1">
            <el-input v-model="addressForm.address2"></el-input>
        </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
        <el-button @click="editAddressDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditAddress()">确 定</el-button>
    </span>
    </el-dialog>

    <!-- 查看物流信息提示框 -->
    <el-dialog
    title="查看物流信息"
    :visible.sync="showLocationDialogVisible"
    width="40%">
    <!-- 表单区域 -->
    <el-timeline>
        <el-timeline-item
        v-for="(activity, index) in locationList"
        :key="index"
        :timestamp="activity.time">
        {{activity.context}}
        </el-timeline-item>
    </el-timeline>

    <span slot="footer" class="dialog-footer">
        <el-button @click="showLocationDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showLocationDialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
import cityOptions from '../../assets/province/city_data2017_element.js'
export default {
    created(){
        this.getOrderList();
    },
    data(){
        return{
            queryInfo:{
                query:'',
                pagenum:1,
                pagesize:10
            },
            total:0,
            orderList:[],
            editAddressDialogVisible:false,
            cityOptions: cityOptions,
            addressForm:{
                address1:[],
                address2:''
            },
            addressFormRules:{
                address1:[
                    {required: true, message: "请选择省市区/县", trigger: "blur"}
                    ],
                address2:[
                    {required: true, message: "请填写详细地址", trigger: "blur"}
                ],
            },
            showLocationDialogVisible:false,
        locationList: [
            {
            "time": "2018-05-10 09:39:00",
            "ftime": "2018-05-10 09:39:00",
            "context": "已签收,感谢使用顺丰,期待再次为您服务",
            "location": ""
            },
            {
            "time": "2018-05-10 08:23:00",
            "ftime": "2018-05-10 08:23:00",
            "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
            "location": ""
            },
            {
            "time": "2018-05-10 07:32:00",
            "ftime": "2018-05-10 07:32:00",
            "context": "快件到达 [北京海淀育新小区营业点]",
            "location": ""
            },
            {
            "time": "2018-05-10 02:03:00",
            "ftime": "2018-05-10 02:03:00",
            "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
            "location": ""
            },
            {
            "time": "2018-05-09 23:05:00",
            "ftime": "2018-05-09 23:05:00",
            "context": "快件到达 [北京顺义集散中心]",
            "location": ""
            },
            {
            "time": "2018-05-09 21:21:00",
            "ftime": "2018-05-09 21:21:00",
            "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
            "location": ""
            },
            {
            "time": "2018-05-09 13:07:00",
            "ftime": "2018-05-09 13:07:00",
            "context": "顺丰速运 已收取快件",
            "location": ""
            },
            {
            "time": "2018-05-09 12:25:03",
            "ftime": "2018-05-09 12:25:03",
            "context": "卖家发货",
            "location": ""
            },
            {
            "time": "2018-05-09 12:22:24",
            "ftime": "2018-05-09 12:22:24",
            "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
            "location": ""
            },
            {
            "time": "2018-05-08 21:36:04",
            "ftime": "2018-05-08 21:36:04",
            "context": "商品已经下单",
            "location": ""
            }
        ],
        }
    },
    methods:{
        async getOrderList(){
            const {data:res} = await this.$http.get('orders', {params:this.queryInfo});
            if(res.meta.status !== 200) return this.$message.error('获取订单列表数据失败');
            this.orderList = res.data.goods.map(v=>({...v, create_time_cn:(new Date(v.create_time * 1000).toLocaleString())}));
            this.total = res.data.total;
            // console.log(this.orderList);
        },

        showEditDialog(row){
            console.log(row);
            this.editAddressDialogVisible = true;
        },
        async showLocationDialog(){
            this.showLocationDialogVisible = true;
            
        },
        handleSizeChange(newSize){
            this.queryInfo.pagesize = newSize;
            this.getOrderList();
        },
        handleCurrentChange(newPage){
            this.queryInfo.pagenum = newPage;
            this.getOrderList();
        },
        handleEditAddress(){
            this.$refs.addressFormRef.validate(valid => {
                if(!valid) return this.$message.error('地址信息校验失败');
                this.editAddressDialogVisible = false;
                this.$message.success('修改地址成功');
            })
        },
       
        handleEditClose(){
            this.$refs.addressFormRef.resetFields();
        }

    }
 };
</script>

<style lang="less" scoped>
.order_table{
    margin-top: 20px;
}

.el_pagination_class{
    margin-top: 20px;
}

.el_cascader_class{
    width:100%;
}
</style>
